Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update entity saved states to be selected by default and partitioned by type. #21159

Merged
merged 28 commits into from
Apr 2, 2020

Conversation

Addison-Stavlo
Copy link
Contributor

@Addison-Stavlo Addison-Stavlo commented Mar 26, 2020

Description

This PR offers 2 Bug Fixes:

  1. Allows checkboxes to be toggled on/off again.
  2. Allows parent post to actually save through this when applicable (it was previously not actually saving)

And also 2 minor design changes as suggested in #20421 :

  1. All checkboxes selected by default.
  2. Partition the list by entity type.

I believe these changes are a small step in the right direction for the future designs being suggested. However, I believe this is a good place to review and merge current changes to re-introduce working functionality.

More Info

1. Allows checkboxes to be toggled on/off again.

There was a logic error preventing the items to be selected/deselected for saving.

unselectable

2. Allows parent post to actually save through this when applicable

This EntitySavedStates component receives an ignoredForSave prop as a list of entities to be ignored by its save function. However, the items shown in the selectable save list did not exclude entities which are part of ignoredForSave. This would cause the perception of these items (currently limited to parent entities in the Page, Post, etc. editors) to be saved when they actually were not.

For reasons outlined in the comment below #21159 (comment), I think it is best to get rid of this prop altogether, so now the parent entities like 'Page' will save as expected when applicable.

Screen Shot 2020-03-25 at 8 38 15 PM

3 & 4. All checkboxes selected by default & Entities partitioned by type:

Instead of all savable items being unselected by default, they will be checked by default and separated by entity type:

Screen Shot 2020-03-25 at 8 15 49 PM

How has this been tested?

Tested on local docker setup in page, post, template, template part, and site editor instances.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • Minor design/functionality update (non-breaking change which adds functionality)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@github-actions
Copy link

github-actions bot commented Mar 26, 2020

Size Change: +21 kB (2%)

Total Size: 884 kB

Filename Size Change
build/a11y/index.js 1.02 kB +18 B (1%)
build/annotations/index.js 3.45 kB +23 B (0%)
build/api-fetch/index.js 3.8 kB +411 B (10%) ⚠️
build/autop/index.js 2.59 kB +2 B (0%)
build/block-directory/index.js 6.03 kB +9 B (0%)
build/block-editor/index.js 102 kB +184 B (0%)
build/block-editor/style-rtl.css 11.2 kB +207 B (1%)
build/block-editor/style.css 11.2 kB +210 B (1%)
build/block-library/editor-rtl.css 7.21 kB -11 B (0%)
build/block-library/editor.css 7.21 kB -12 B (0%)
build/block-library/index.js 110 kB +374 B (0%)
build/block-library/style-rtl.css 7.5 kB +69 B (0%)
build/block-library/style.css 7.51 kB +68 B (0%)
build/block-serialization-default-parser/index.js 1.65 kB -1 B
build/blocks/index.js 57.5 kB -1 B
build/components/index.js 195 kB +4.48 kB (2%)
build/components/style-rtl.css 16.1 kB +296 B (1%)
build/components/style.css 16 kB +297 B (1%)
build/compose/index.js 6.21 kB +4 B (0%)
build/core-data/index.js 10.7 kB +55 B (0%)
build/data-controls/index.js 1.03 kB -3 B (0%)
build/data/index.js 8.23 kB -19 B (0%)
build/date/index.js 5.37 kB -1 B
build/deprecated/index.js 772 B +1 B
build/dom-ready/index.js 569 B +1 B
build/dom/index.js 3.05 kB -1 B
build/edit-post/index.js 92.3 kB +1.06 kB (1%)
build/edit-post/style-rtl.css 12 kB +3.54 kB (29%) 🚨
build/edit-post/style.css 12 kB +3.55 kB (29%) 🚨
build/edit-site/index.js 9.1 kB +2.38 kB (26%) 🚨
build/edit-site/style-rtl.css 4.62 kB +1.74 kB (37%) 🚨
build/edit-site/style.css 4.62 kB +1.74 kB (37%) 🚨
build/edit-widgets/index.js 4.43 kB +2 B (0%)
build/edit-widgets/style-rtl.css 3.74 kB +1.16 kB (30%) 🚨
build/edit-widgets/style.css 3.74 kB +1.16 kB (30%) 🚨
build/editor/editor-styles-rtl.css 423 B -5 B (1%)
build/editor/editor-styles.css 426 B -5 B (1%)
build/editor/index.js 42.8 kB -1.05 kB (2%)
build/editor/style-rtl.css 3.49 kB -503 B (14%) 👏
build/editor/style.css 3.49 kB -495 B (14%) 👏
build/format-library/index.js 6.95 kB +5 B (0%)
build/i18n/index.js 3.57 kB +82 B (2%)
build/keyboard-shortcuts/index.js 2.3 kB +1 B
build/keycodes/index.js 1.7 kB +12 B (0%)
build/list-reusable-blocks/index.js 2.99 kB +2 B (0%)
build/media-utils/index.js 4.84 kB -1 B
build/notices/index.js 1.57 kB -2 B (0%)
build/nux/index.js 3.01 kB -3 B (0%)
build/plugins/index.js 2.54 kB -2 B (0%)
build/primitives/index.js 1.5 kB -2 B (0%)
build/priority-queue/index.js 780 B -1 B
build/rich-text/index.js 14.5 kB +3 B (0%)
build/server-side-render/index.js 2.54 kB -7 B (0%)
build/shortcode/index.js 1.69 kB -8 B (0%)
build/token-list/index.js 1.28 kB +10 B (0%)
build/url/index.js 4.01 kB +2 B (0%)
build/viewport/index.js 1.6 kB -3 B (0%)
build/warning/index.js 1.14 kB +1 B
build/wordcount/index.js 1.17 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/blob/index.js 620 B 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/edit-navigation/index.js 2.48 kB 0 B
build/edit-navigation/style-rtl.css 239 B 0 B
build/edit-navigation/style.css 241 B 0 B
build/element/index.js 4.44 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 1.93 kB 0 B
build/html-entities/index.js 622 B 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/redux-routine/index.js 2.84 kB 0 B

compressed-size-action

@Addison-Stavlo Addison-Stavlo marked this pull request as ready for review March 26, 2020 01:22
@Addison-Stavlo Addison-Stavlo self-assigned this Mar 26, 2020
@Addison-Stavlo Addison-Stavlo changed the title Update entity saved states to be selected by default. Update entity saved states to be selected by default and partitioned by type. Mar 26, 2020
@youknowriad youknowriad added the Needs Design Feedback Needs general design feedback. label Mar 26, 2020
@Addison-Stavlo
Copy link
Contributor Author

Addison-Stavlo commented Mar 27, 2020

Actually, the more I look at the code, the history, and the designs the more it seems to make sense to get rid of this ignoredForSave prop altogether.

It is only added here:

ignoredForSave={ this.createIgnoredForSave(
postType,
postId
) }

And is only used to prevent saving those parent post items here:

const entitiesToSave = dirtyEntityRecords.filter(
( { kind, name, key } ) => {
return ! some(
ignoredForSave.concat( unsavedEntityRecords ),
( elt ) =>
elt.kind === kind &&
elt.name === name &&
elt.key === key
);
}
);

This prop was added as part of the first exploration PR into this #18029, so maybe the initial idea was not to have the parent post savable through this component. But since design mockups all seem to show this functionality, we should just remove this and allow saving of the parent post in the modal when applicable.

@youknowriad can you think of any reasons why we would need to keep this prop? Currently parent posts show up in the modal but are only giving the illusion of being saved through this. We should probably just remove this and have them show up and save as expected (as opposed to my initial direction of conforming other things to this prop that doesn't seem to make sense anymore).

I updated the PR to go this route as it seems to make the most sense.

@youknowriad
Copy link
Contributor

I agree with the reasoning here 👍 I'm not really sure why we needed this prop in the first place.

Do you think it's possible to add an e2e test about this feature (multi-entity save)?

Copy link
Contributor Author

@Addison-Stavlo Addison-Stavlo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think it's possible to add an e2e test about this feature (multi-entity save)?

Sure thing! I updated this to have an e2e test at packages/e2e-tests/specs/editor/various/multi-entity-saving.test.js. These tests walk through both the post editor as well as the site editor.

const [ slug, _setSlug ] = useState();
const [ theme, setTheme ] = useState();
const [ slug, _setSlug ] = useState( '' );
const [ theme, setTheme ] = useState( '' );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was necessary to edit these to stop a react warning from breaking the e2e tests. Without initializing as an empty string, react would complain about turning an uncontrolled component into a controlled component once the input was used.

@@ -53,12 +53,13 @@ export default function SaveButton() {
const disabled = ! isDirty || isSaving;

const [ isOpen, setIsOpen ] = useState( false );
const open = useCallback( setIsOpen.bind( null, true ), [] );
const close = useCallback( setIsOpen.bind( null, false ), [] );
const open = useCallback( () => setIsOpen( true ), [] );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These were also necessary to edit due to reacts warnings breaking e2e tests. Without this change, react would throw a warning when the button was used about useState update functions not supporting the second callback argument.

@youknowriad
Copy link
Contributor

packages/e2e-tests/specs/editor/various/multi-entity-saving.test.js

This should probably be moved to the "experimental" specs folder. That's how we distinguish the tests that can run in Core from the others (experimental ones)

@mtias
Copy link
Member

mtias commented Apr 1, 2020

I'd love to get this one in as it'd improve the quality of the upcoming WP Block Talk demo :P

@Addison-Stavlo
Copy link
Contributor Author

This should probably be moved to the "experimental" specs folder. That's how we distinguish the tests that can run in Core from the others (experimental ones)

That makes sense. I moved it to the experimental folder.

@youknowriad
Copy link
Contributor

youknowriad commented Apr 1, 2020

Looks like this is not working properly for the site entity. I guess it shouldn't be a top level item.
Capture d’écran 2020-04-01 à 7 49 53 PM

or maybe we should use the "site title" as label there.

@mtias
Copy link
Member

mtias commented Apr 1, 2020

Yes, I still wish we could use the block name that triggered the entity save here, or the name of the attribute changed :)

@Addison-Stavlo
Copy link
Contributor Author

Looks like this is not working properly for the site entity.

Thats what I would have expected to see given the functionality on master and the scope of the given changes. It shows up like that on master too:

Screen Shot 2020-04-01 at 3 01 16 PM

So at least it's not a regression, but definitely something that we will need to address.

I guess it shouldn't be a top level item.

I don't understand what we mean by 'top level item' in this case, could you elaborate please?

Yes, I still wish we could use the block name that triggered the entity save here, or the name of the attribute changed :)

Agreed, that would be much less ambiguous that the 'untitled' site. I'd be happy to iterate further on these things but I'd vote to address them in follow-up PR(s) if possible.

@mtias
Copy link
Member

mtias commented Apr 1, 2020

@Addison-Stavlo I think the difference is between showing "Site" as a heading and "Untitled" as the checked item vs just showing the checkbox with "Site" next to it.

@Addison-Stavlo
Copy link
Contributor Author

I think the difference is between showing "Site" as a heading and "Untitled" as the checked item vs just showing the checkbox with "Site" next to it.

Ah, ok I see now. Thank you! Il do something about that here shortly.

On a related note about having the 'Untitled' appear now as opposed to before:

The 'Untitled' started showing up as there was an 'Untitled' label fallback in the code but hidden behind other logic that would never trigger it:

{ !! record.title && (
<>
{ ': ' }
<strong>
{ record.title || __( 'Untitled' ) }
</strong>
</>
) }

I assumed it was desired as the fallback label so now entities without titles should show 'untitled' as pointed out with the Site's entity.

@Addison-Stavlo
Copy link
Contributor Author

Addison-Stavlo commented Apr 1, 2020

Ok, with a small edit to the __experimentalGetDirtyEntityRecords selector, the site entity no longer comes back untitled:

Screen Shot 2020-04-01 at 5 31 46 PM

Copy link
Member

@noahtallen noahtallen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So happy that I can actually save entities now! 🎉

(I rebased this on master before testing.)

I don't know if this is related to the PR, but I am noticing that the blue dots do not reflect which templates need updated. I took this screenshot immediately upon entering the page before editing it. (And it stays the same even after saving them).

Screen Shot 2020-04-01 at 8 24 01 PM

Additionally, when I make a change to only a template part, it asks me to save the template part and the template (which I didn't expect, but maybe it is necessary??). When I change only the template, I only have to save the template.

Anyways, this does fix what is advertised: it correctly saves the templates. So I think it could be merged for the block talk, and other stuff could be follow ups

@youknowriad
Copy link
Contributor

Additionally, when I make a change to only a template part, it asks me to save the template part and the template (which I didn't expect, but maybe it is necessary??

I believe it shouldn't ask to save the template in this case, I know it's not an easy bug though. It's related to how "controlled" InnerBlocks work. I proposed a solution at some point but It was discarded at that moment. If it's something you're interested in tackling le me know, I can explain further.

I took this screenshot immediately upon entering the page before editing it. (And it stays the same even after saving them)

I believe this is "normal" because these templates come initially from the theme files and are not saved in the CPT.

@youknowriad
Copy link
Contributor

Looks like the site editor test is failing, I'm going to skip it to land this but consider checking it separately. Thanks.

@youknowriad youknowriad merged commit e82e819 into master Apr 2, 2020
@youknowriad youknowriad deleted the update/update-flow-with-entities branch April 2, 2020 09:50
@github-actions github-actions bot added this to the Gutenberg 7.9 milestone Apr 2, 2020
@Addison-Stavlo
Copy link
Contributor Author

Looks like the site editor test is failing

Is that in regards to the e2e test I added? Il take a look. It has been passing for me but I think I may need to find a way to make it a more controlled environment. Navigating to a given site's Site Editor isn't going to be as universally congruent as starting a new post is, so we may have to force it to use the demo template and maybe some other tricks to make it more consistent.. 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Feedback Needs general design feedback.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants